<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加文章</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/server.js"></script>
    <script src="/static/js/tools.js"></script>
    <script src="/static/js/qs.js"></script>
</head>

<body>
    <div id="app">
        <div class="container col-md-3 col-md-8">
            <div class="py-4">
                <div class="mb-3">
                    <label class="form-label">文章封面:</label>
                    <input type="file" class="form-control" id="cover" name="cover" accept=".png, .jpg, .jpeg"
                        @change="handleFileUpload" value="111" />
                </div>
                <div class="mb-3">
                    <label class="form-label">文章标题:</label>
                    <input type="text" class="form-control" id="title" name="title" v-model="article.title" />
                </div>
                <div class="row mb-3">
                    <div class="col">
                        <label class="form-label">作者:</label>
                        <input type="text" class="form-control" id="created_by" name="created_by"
                            v-model="article.created_by" />
                    </div>
                    <div class="col">
                        <label class="form-label">类型:</label>
                        <select class="form-select" v-model="article.tag_id">
                            <option v-for="item in tags" :value="item.id">{{item.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">文章简介:</label>
                    <input type="text" class="form-control" id="intro" name="intro" v-model="article.intro" />
                </div>
                <div class="mb-3">
                    <label class="form-label">文章内容:</label>
                    <textarea class="form-control" rows="5" id="comment" name="content"
                        v-model="article.content"></textarea>
                </div>
                <a class="btn btn-primary" href="/app/view/index.html">取消</a>
                <button class="btn btn-primary" @click="submitArticle">提交</button>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            article: {
                id: 0,
                title: "",
                intro: "",
                created_by: "",
                content: "",
                cover_image: "111",
            },
            tags: [],
        },
        created() {
            this.getArticleInfo();
        },
        methods: {
            getArticleInfo() {
                let id = tools.getUrlParams(window.location.href, 'id');
                if (id > 0) {
                    axios.get('http://127.0.0.1:8001/user/queryArticle', { params: { id: id } }).then(res => {
                        if (res.code != 200) {
                            return;
                        }
                        this.article = res.data.article;
                        this.tags = res.data.tags;
                    })
                } else {
                    axios.get('http://127.0.0.1:8001/user/queryTags').then(res => {
                        console.log(res);
                        if (res.code != 200) {
                            return;
                        }
                        this.tags = res.data;
                    })
                }
            },
            submitArticle() {
                let uri = tools.getUrlParams(window.location.href, 'id') ? 'editArticle' : 'addArticle';
                axios.post(`http://127.0.0.1:8001/user/${uri}`, this.article).then(res => {
                    console.log(res)
                    if (res.code != 200) {
                        console.log(res.msg)
                        return;
                    }
                    console.log("修改成功")
                    window.location.replace('/app/view/index.html');
                })
            },
            handleFileUpload(e) {
                console.log(e);
                let file = e.target.files[0];
                // const fileReader = new FileReader()
                // fileReader.readAsDataURL(file) //读取图片
                // fileReader.addEventListener('load', function () {
                //     // 读取完成
                //     let res = fileReader.result
                //     // res是base64格式的图片
                // })
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                let formData = new FormData()
                formData.append("file", file, "1.png")
                axios.post("http://127.0.0.1:8001/user/uploadImg", formData, config).then(res => {

                })
            },
        },

    })
</script>

</html>